<template>
	<div style="">
		<!-- body -->
		<div class="card bg-dark text-dark mt-4 " style="z-index: -1;">
			<img style="margin-top: -8%;" src="https://www.fluxmq.com/static/img/base-bg.b4edb88b.svg" class="card-img"
				alt="...">
			<div class="card-img-overlay" style="margin-top: 5%;">
				<h2 class="card-title mb-4">物联网基础组件的捍行者</h2>
				<h3 style="font-size: 2.1vw;" class="card-title"> 始至终，永不止步！</h3>
			</div>
		</div>
		<!-- 我们的愿景 -->
		<div class="container py-3">
			<div class="row d-flex align-items-center">
				<div class="col">
					<com-litle :data1="{ title: 'VALUES', text: '我们的愿景' }"></com-litle>
				</div>
				<!-- 暂位 -->
				<div class="col mt-4"></div>
			</div>
			<div class="row d-flex  justify-content-around  align-items-center"
				style="background-color:#fefefe;padding: 7% 0;">
				<!-- 左边 -->
				<div class="col-11 mt-2 col-md-5 car_item p-3 d-flex flex-column " style="width: 100px;">
					<div class="row w-75 d-flex align-items-center" style="height: 250px;">
						<div class="col-8">
							<img style="width: 100%;" src="https://www.fluxmq.com/static/img/vision-1.8e16cac5.png"
								alt="">
						</div>
						<div class="col-3">
							<img src=" https://www.fluxmq.com/static/img/vision-2.ee393a37.svg" alt="">
						</div>
					</div>
					<!-- 底部文字 -->
					<div class="row d-flex justify-content-center my-3 mx-2">
						<div class="text-left" style="height: 30px;">构建物理世界与数字世界的桥梁，企业数字化转型的基座</div>
					</div>
				</div>
				<!-- 暂位 -->
				<div class="col-11 col-sm-1"></div>
				<!-- 右边 -->
				<div class="col-11 mt-2 col-md-5 car_item p-3 d-flex flex-column " style="width: 100px;">
					<div class="row w-75 d-flex align-items-center" style="height: 250px;">
						<div class="col-8">
							<img style="width: 100%;" src="https://www.fluxmq.com/static/img/vision-3.f70ba23c.png"
								alt="">
						</div>
						<div class="col-3">
							<img src=" https://www.fluxmq.com/static/img/vision-4.7b921676.svg" alt="">
						</div>
					</div>
					<!-- 底部文字 -->
					<div class="row d-flex justify-content-center my-3 mx-2">
						<div class="text-left" style="height: 30px;">100%自主可控的高性能国产消息中间件，打破垄断，助力中小企业数字化建设</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 我们的价值 -->
		<div style="background-color: #f5f8fa;padding: 6% 0;">
			<div class=" container">
				<div class="row">
					<div class="col">
						<com-litle :data1="{ title: 'OUR VALUES', text: '我们的价值' }"></com-litle>
					</div>
					<div class="col"></div>
				</div>
				<div class="row m-4 d-flex justify-content-between">
					<div class="col-12 col-sm-6 mb-4 mt-4" v-for="item in valueList" :key="item">
						<div class="value_item">
							<img class="col-12 col-sm-8" :src="item.img" alt="">
							<div class="value_box p-3 text-left col-12 col-sm-6">
								<div class="mb-2">{{ item.title }}</div>
								<div class="box_text">{{ item.text }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ComLitle from '@/components/ComLitle.vue'
export default {
	components: {
		ComLitle
	},
	data() {
		return {
			valueList: [
				{ img: 'https://www.fluxmq.com/static/img/values-1.ce962166.png', title: '连接物理和数字世界', text: '多协议适配，数据收集与桥接，搭建物理世界与数字世界的双向信息通道，加快构建物联网相关应用系统' },
				{ img: 'https://www.fluxmq.com/static/img/values-2.8422dc49.png', title: '与你共创', text: '通过开源社区和生态伙伴建设，我们一直致力于搭建物联网开发者与用户之间的桥梁。与更多开源产品共创平台，服务用户未来' },
				{ img: 'https://www.fluxmq.com/static/img/values-3.c8b10603.png', title: '热爱数字化带来的价值', text: '我们始终聚焦在JAVA语言的核心组件开发，从而让使用者更聚焦业务需求，创造更多数字化价值，让数据接入变得So easy～' },
				{ img: 'https://www.fluxmq.com/static/img/values-4.b035d283.png', title: '让我们共同成长', text: '通过开源社区和生态伙伴建设，我们一直致力于搭建物联网开发者与用户之间的桥梁。与更多开源产品共创平台，服务用户未来' },
			]
		}
	},

}
</script>

<style lang="scss" scoped>
.card {
	background-color: white;
	border: none;

	.card-title {
		color: #000;
		font-size: 3.1vw;
	}
}

.car_item {
	box-shadow: 1rem 1rem 3rem 0 rgba(20, 45, 95, .12);
	border: 1px solid #F5F5F5;
	border-radius: 20px;
}

.value_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	img {
		// width:;
	}

	.value_box {
		background-color: #fff;
		min-width: 88%;
		border-radius: 20px;
		position: relative;
		display: block;
		margin-top: -9%;

		.box_text {
			font-size: .8em;
		}
	}

}
</style>